<template>
  <div class="personal_center">
    <Cropper v-if="ishowCropper" :ishowCropper="ishowCropper" @fn="show"/>
    <!-- 左边 -->
    <div class="userInfo box">
        <div class="userInfo_header">
          个人信息
        </div>
        <div class="userInfo_body">
          <div>
            <div class="head_portrait">
              <div class="head"  @click="showCropper()">
                <img :src=" IMG_BASEURL + (userInfo.user.avatar || '/profile/avatar/2022/10/10/blob_20221010200353A001.jpeg') " alt="" />
                <div class="maskbox" >
                  <div class="mask">
                  <span>+</span>
                  </div>
                </div>
              </div>
            </div>
            <ul class="list-group">
              <li class="list-group-item">
                <i class="el-icon-s-custom"></i>
                用户名称 
                <div class="pull-right">{{user.userName}}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-mobile-phone"></i>
                手机号码 
                <div class="pull-right">{{user.phonenumber}}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-message"></i>
                用户邮箱 
                <div class="pull-right">{{user.email}}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-guide"></i>
                所属部门 
                <div class="pull-right">{{user.dept.deptName}} / </div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-user-solid"></i>
                所属角色 
                <div class="pull-right">{{user.remark}}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-date"></i>
                创建日期 <div class="pull-right">{{user.createTime}}</div>
              </li>
            </ul>
          </div>
        </div>
    </div>
    <!-- 右边 -->
    <div class="basice box">
        <div class="userInfo_header">
          基本资料
        </div>
        <div class="basice_body">
          <div class="tabs">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="基本资料" name="first">
                <el-form :model="user" :rules="rules" ref="user" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="用户昵称" prop="userName" size="medium">
                  <el-input type="text" autocomplete="off" v-model="user.userName"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码" prop="phonenumber" size="medium">
                  <el-input type="text" autocomplete="off" v-model="user.phonenumber"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" size="medium" prop="email">
                  <el-input v-model="user.email"></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                      <el-radio label="0" v-model="user.sex">男</el-radio>
                      <el-radio label="1" v-model="user.sex">女</el-radio>
                  </el-form-item>

                  <el-form-item>
                  <el-button type="primary" size="small" @click="submitForm('user')">保存</el-button>
                  <el-button type="danger" size="small" @click="close">关闭</el-button>
                  </el-form-item>
              </el-form>
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="second">
                <ChangePass />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import ChangePass from "@/components/ChangePass.vue"
import Cropper from "@/components/Cropper.vue"
import { GetUserInfoApi,GetChangeInfoApi } from '@/request/api'
import { IMG_BASEURL } from '@/utils/baseurl'
import { mapState } from 'vuex'
import {validateUsername,validateUserphone,validateUseremail} from "@/utils/validate"

export default {
  components:{
    ChangePass,Cropper
  },
  data(){
    return{
      // 头像
      IMG_BASEURL,
      // 用户信息---左边
      user:{
          dept:{
            deptName:''
          },
          userName: '',
          phonenumber:'',
          email:'',
          radio:0
      },
      // 基本资料的一些规则
      rules: {
          userName: [
          { required: true, message: '用户昵称不能为空', trigger: 'blur' },
          { validator: validateUsername, trigger: "blur" },
          ],
          phonenumber:[
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: validateUserphone, trigger: "blur" },
          ],
          email:[
          { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
          { validator: validateUseremail, trigger: "blur" },
          ]
      },
      
      // 当前的tab项
      activeName: 'first',
      // 头像修改模态框
      ishowCropper: false,
      }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  created(){
    this.getPersonalData()
  },
  methods:{
    // 请求接口
    async getPersonalData(){
      const GetUserInfoApiRes = await GetUserInfoApi({
      });
      console.log(GetUserInfoApiRes);
      this.user = GetUserInfoApiRes.user
      this.ruleForm = GetUserInfoApiRes.user
           
    },
    handleClick(tab, event) {
        console.log(tab, event);
    },
    // 退出个人中心页面并跳转到首页
    close() {
    this.$router.push("/home");
    
    },
    // 点击头像显示，修改头像模态框
    showCropper(){
      this.ishowCropper = true
    },
    // 修改模态框的状态为关闭状态，子传父
    show(){
      this.ishowCropper=false
    },
    // 修改基本信息
    submitForm(user) {
      this.$refs[user].validate(async (valid) => {
        if (valid) {
          // 校验通过，走这里的代码
          // 发起登录请求
          let res = await GetChangeInfoApi({
            nickName: this.user.userName,
            phonenumber: this.user.phonenumber,
            email: this.user.email,
            sex: this.user.radio,
          });
          if (!res) return;
          console.log(res);
          // 提示操作成功
          this.$message({ message: "修改成功！", type: "success" });
        }
      });
    },  
   
  }
}
</script>

<style lang = "less" scoped>
.bigmask{
    background-color: #000;
    width: 100%;
    height: 100%;
  }
.personal_center{
  /* 可以共用的代码 */
  .userInfo_header{
      height: 46px;
      line-height: 50px;
      padding-left: 20px;
      border-bottom: 1px solid #e7eaec;
  }
  /* box的样式 */
  .box{
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #fff;
    color: #303133;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }

  
  .userInfo{
    width: 25%;
    float: left;
    .userInfo_body{
      padding: 15px 20px 20px 20px;
      .head_portrait{
        margin-bottom: 20px;
        .head{
          position: relative;
          margin-bottom: 20px;
          height: 120px;
          width: 120px;
          border-radius: 50%;
          margin: auto;
          img{
          height: 120px;
          width: 120px;
          border-radius: 50%;
          }
          .mask {
            position: absolute;
            top: 0;
            left: 0;
            height: 120px;
            width: 120px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.4);
            color: #ffffff;
            opacity: 0;
            span{
              font-size: 30px;
              line-height: 120px;
              padding-left: 50px;
            }
        }
        .mask h3 {
            text-align: center;
        }
        .maskbox:hover .mask {
            opacity: 1;   
            cursor: pointer;
        }
        }
        
      }
      .list-group{
        margin-bottom: 20px;
        .list-group-item{
          border-bottom: 1px solid #e7eaec;
          border-top: 1px solid #e7eaec;
          /* height: 42px;
          line-height: 42px; */
          padding: 13px 0;
          font-size: 13px;
          .pull-right{
          float: right!important
        }
        }
        
        
      } 
    }
      
  }
  .basice{
    width: 74%;
    float: right;
      .basice_body{
        padding: 15px 20px 20px 20px;
      }
  }

}

</style>